<template>
    <div id="pages" class="pages">
        <div 
            v-for="(item,key) in pages"
            class="pages__item pages__active"
            @click="openSetting"
        >
            {{ item.style.navigationBarTitleText ? item.style.navigationBarTitleText : '页面' + (key + 1) }}
        </div>
    </div>
</template>


<script lang="ts" setup>
    import { ref,watch,reactive } from 'vue';
    import { get } from '@/util/url.js'

    // 当前选中的页面
    let currentPage = ref(0);

    // 页面数据列表
    let pages = ref([])

    const prop = defineProps({
        // 当前操作的模板id
        tplId: {
            default: 0
        },
        initComplete: {
            default: false
        }
    })
    
    /**
     * 建通模板是否开启成功
     */
    watch(() => prop.initComplete,(value) => {
        if(value) {
            getPages()
        }
    })

    /**
     * 打开页面设置面板
     */
    const openSetting = () => {
        console.log("跳转设置页面")
    }

    /**
     * 获取项目页面
     */
     const getPages = () => {
      get("tplPages/getPages",{
            tpl_id: prop.tplId
        })
            .then((res) => { 
                pages.value = res
                setCurrentPage()
            })
    }

    /**
     * 设置当前选择的页面
     */
    const setCurrentPage = () => {
        console.log("设置当前页面")
    }

</script>

<style lang="scss" scoped>
.pages{
    &__item{
        display: flex;
        align-items: center;
        padding-left: 20px;
        height: 50px;
        cursor: pointer;
        font-size: 14px;
        border-bottom: 1px solid #ccc;
        &:hover{
            background-color: var(--second-bg-color);
        }
    }
    &__active{
        background-color: var(--main-bg-color);
        color: #ffffff;
    }
}
</style>
    